<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="template">
<head>
    <meta charset="UTF-8" />
    <meta content="text/html"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <title>检测报告</title>
    <link rel="stylesheet" href="../css/reportDetail.css"/>
    <script src="../js/detectReport.js"></script>
</head>
<body id="orange">
<div class="container">
    <div class="content">
        <div class="container-right" layout:fragment="content">
            <div class="crumbs">
                <ul>
                    <li><a href="/index/home">首页</a><i class="triangle-icon"></i></li>
                    <li><a href="/myVehicle/detectReport">我的车况</a><i class="triangle-icon"></i></li>
                    <li class="active"><a href="/myVehicle/reportDetail">检测报告</a></li>
                </ul>
            </div>
            <div class="report-title">
                <div class="report-head">
                    <h3 th:text="#{detectReportDetailHtml.reportName}"></h3>
                </div>
                <div class="report-btn">
                    <a href="/myVehicle/detectReport"><i class="report-icon"></i></a>
                    <a href="/stationDetail"><i class="redetect-icon"></i></a>
                </div>
            </div>
            <div class="report-info">
                <table class="report-table">
                    <tbody>
                    <tr>
                        <td>
                            <label class="lbl-report"
                                   th:text="#{detectReportDetailHtml.plateNumber} +':'"></label><label
                                class="lbl-reportcon" th:text="${report.plateNumber}"></label>
                        </td>
                        <td>
                            <label class="lbl-report"
                                   th:text="#{detectReportDetailHtml.plateNumber} +':'"></label><label
                                class="lbl-reportcon" th:text="${report.ownPerople}"></label>
                        </td>
                        <td>
                            <label class="lbl-report"
                                   th:text="#{detectReportDetailHtml.vehicelType} +':'"></label><label
                                class="lbl-reportcon" th:text="${report.vehicelType}"></label>
                        </td>
                        <td>
                            <label class="lbl-report"
                                   th:text="#{detectReportDetailHtml.registerTime} +':'"></label><label
                                class="lbl-reportcon"
                                th:text="${#calendars.format(report.registerTime,'yyyy年MM月dd日')}"></label>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <label class="lbl-report"
                                   th:text="#{detectReportDetailHtml.detectCompany} +':'"></label><label
                                class="lbl-reportcon" th:text="${report.detectCompany}"></label>
                        </td>
                        <td>
                            <label class="lbl-report"
                                   th:text="#{detectReportDetailHtml.detectResult} +':'"></label><label
                                class="lbl-reportcon" th:text="${report.detectResult}"></label>
                        </td>
                        <td>
                            <label class="lbl-report" th:text="#{detectReportDetailHtml.detectTime} +':'"></label><label
                                class="lbl-reportcon"
                                th:text="${#calendars.format(report.reportTime,'yyyy年MM月dd日')}"></label>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="evaluate-detail" th:if="${report.editstatus} == '1'">
                    <div class="modular">
                        <h3 class="evaluate-detail-title" th:text="#{detectReportDetailHtml.detectSuggest} +':'"></h3>
                        <p th:text="' 　　' + ${report.description}">
                        </p>
                    </div>
                </div>
                <ul class="select-item">
                    <li th:each="reportItem,reportItemStat : ${reportList}" th:data="'item' + ${reportItemStat.count}"
                        th:class="(${reportItem.itemStatus} == '0')? plate_defaultok : plate_defaultng"
                        th:text="${reportItemStat.count} + '、' +${reportItem.category} ">
                    </li>
                </ul>
                <div>
                    <img src="../img/timg1.jpg" width="500px" height="360px" border="1"/>
                    <img src="../img/timg2.jpg" width="470px" height="360px" border="1"/>
                </div>
            </div>
            <div class="detailsub">
                <div class="report-detail" th:each="detail,detailStat : ${reportDetailList}"
                     th:id="'item' + ${detailStat.count}">
                    <div class="detail-item"
                         th:classappend="(${#lists.toList(reportList).get(detailStat.index).itemStatus} != '0')? 'itemerror'">
                        <lable class="lbl-item" th:text="${detailStat.count} + '、' + ${detail.key}"></lable>
                    </div>
                    <table class="detail-table">
                        <tbody>
                        <tr th:each="itemList,itemListStat : ${detail.value}">
                            <td th:each="detailItem,detailItemStat : ${itemList}">
                                <label class="lbl-report" th:text="${detailItem.itemName} + ':'"></label>
                                <label class="lbl-reportcon" th:inline="text"><i
                                        th:class="(${detailItem.itemStatus} == '0')? 'itemok-icon' : 'itemng-icon'"></i>
                                    [[${detailItem.itemValue}]]</label>
                                <i class="itemclaim-icon" th:title="#{detectReportDetailHtml.detectNorm}"
                                   th:data="${detailItem.itemNorm}"></i>
                                <i th:if="${detailItem.itemStatus} == '1'" class="itemanalyze-icon"
                                   th:title="#{detectReportDetailHtml.detectAnalyze}"
                                   th:data="${detailItem.itemAnalyze}"></i>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="report-detail" th:id="'item' + ${lastIndex}">
                    <div class="detail-item"
                         th:classappend="(${#lists.toList(reportList).get(lastIndex - 1).itemStatus} != '0')? 'itemerror'">
                        <lable class="lbl-item"
                               th:text="${lastIndex} + '、' + ${#lists.toList(reportList).get(lastIndex - 1).category}"></lable>
                    </div>
                    <table class="detail-table">
                        <tbody>
                        <tr th:each="lastDetail,lastDetailStat : ${lastList}">
                            <td th:each="lastItem,lastItemStat : ${lastDetail}">
                                <label class="lbl-report" th:text="${lastItem.itemName}"></label>
                                <label class="lbl-reportleft" th:text="${lastItem.itemChildName} + ':'"></label>
                                <label class="lbl-reportcon" th:inline="text">
                                    <i th:class="(${lastItem.itemStatus} == '0')? 'itemok-icon' : 'itemng-icon'"></i>
                                    [[${lastItem.itemParam}]][[${lastItem.itemValue}]]
                                </label>
                                <i class="itemclaim-icon" th:title="#{detectReportDetailHtml.detectNorm}"
                                   th:data="${lastItem.itemNorm}"></i>
                                <i class="itemanalyze-icon" th:title="#{detectReportDetailHtml.detectAnalyze}"
                                   th:if="${lastItem.itemStatus} == '1'" th:data="${lastItem.itemAnalyze}"></i>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!--检验标准或解读分析-->
            <div id="light" class="pop">
                <a href="javascript:void(0)"
                   onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"
                   class="btn-close"></a>
                <div class="pop-content" id="pop1">
                    <h3 th:text="#{detectReportDetailHtml.detectNorm} + ':'"></h3>
                    <p class="pop-content-p"></p>
                </div>
                <div class="pop-content" id="pop2">
                    <h3 th:text="#{detectReportDetailHtml.detectAnalyze} + ':'"></h3>
                    <p class="pop-content-p"></p>
                    <p style="text-align: right;margin-right:20px;"><img src="../img/guangao1.jpg" width="180px"/></p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>